@import './reset.scss';
@import './mixin.scss';
@import './variables.scss';
html {
  @include root-font-size();
}
//@author TalkTao

.flex-shrink-0 {
  flex-shrink: 0;
}
.flex-grow-0 {
  flex-grow: 0;
}
.flex-grow-1 {
  flex-grow: 1;
}
.flex-column {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.object-fit-cover {
  object-fit: cover;
}
.border-box {
  box-sizing: border-box;
}
.fw-bold {
  font-weight: bold;
}
.w-0 {
  width: 0;
}
.w-100 {
  width: 100%;
}
.w-50{
  width: 50%;
}
.h-100 {
  height: 100%;
}
.text-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.text-again-center {
      text-align: center;
}
.flex-column{
      flex-direction: column;
}
@each $key, $val in $fontSizeS {
  .fs-#{$key} {
        font-size: #{$val};
  }
}
//.d-flex {display: flex;}
@each $item in $displayList {
  .d-#{$item} {
        display: #{$item};
  }
}
//.flex-center {justify-content: center;}
@each $commonKey, $commonVal in $flexCommonValues {
  .flex-#{$commonKey} {
        display: flex;
        justify-content: #{$commonVal};
        align-items: #{$commonVal};
  }
  .align-self-#{$commonKey} {
        align-self: #{$commonVal};
  }
}
//.justify-content-between {justify-content: sapce-between;}
@each $key, $val in $justify-content-values {
  .justify-content-#{$key} {
        justify-content: #{$val};
  }
}
//.align-items-start {align-items-start: flex-start;}
@each $key, $val in $align-items-values {
  .align-items-#{$key} {
        align-items: #{$val};
  }
}
//.postion-absolute {absolute;}
@each $pos in $positionList {
  .position-#{$pos} {
        position: #{$pos};
  }
}
//.overflow-x-scroll {overflow-x:scroll}
@each $dir in $overflowDirs {
  .#{$dir}-scroll {
        #{$dir}: scroll;
  }
}
//pt-5 {padding-top: 1vw}
.rounded-circle {
  border-radius: 50%;
}
@for $size from 1 through 50 {
  .rounded-#{$size} {
        border-radius: #{$size}vw;
  }
  @each $t_d_key, $t_d_val in $spaceTypes_Dirs {
        .#{$t_d_key}-#{$size} {
              #{$t_d_val}: #{$size}vw;
        }
  }
  .mx-#{$size} {
        margin-left: #{$size}vw;
        margin-right: #{$size}vw;
  }
  .my-#{$size} {
        margin-top: #{$size}vw;
        margin-bottom: #{$size}vw;
  }
  .px-#{$size} {
        padding-left: #{$size}vw;
        padding-right: #{$size}vw;
  }
  .py-#{$size} {
        padding-top: #{$size}vw;
        padding-bottom: #{$size}vw;
  }
}
//top-0 {top:　0;}
@each $type, $val in $positionTypes {
  .#{$type}-0 {
        #{$val}: 0;
  }
}
//bg-white {background-color: white;}
@each $key, $val in $colors {
  .bg-#{"" + $key} {
        background-color: #{$val};
  }
  .text-#{"" + $key} {
        color: #{$val};
  }
}
//.border-pill {border-radius: 50rem}
@each $key, $val in $radiusList {
  .border-#{$key} {
        border-radius: #{$val};
  }
}
//.opacity-75 {opacity: 0.75}
@for $index from 0 through 4 {
  .opacity-#{$index * 25} {
        opacity: #{$index * 0.25};
  }
}
//.text-center {text-align: center}
@each $var in $textAlignDirs {
  .text-#{$var} {
        text-align: #{$var};
  }
}
//.border-bottom-1 {border-bottom: 1px} .border-bottom {border-bottom: 1px}
@for $size from 0 to 5 {
  @each $posKey, $posVal in $positionTypes {
        @if $size == 0 {
              .border-#{$posKey} {
                    border-#{$posVal}: 1px solid #e6e6e6; 
              }
        } @else {
              .border-#{$posKey}-#{$size} {
                    border-#{$posVal}: #{$size}px solid #e6e6e6;
              }
        }
  }
}
@mixin placeholderColor($color) {
  &::input-placeholder {
        /*WebKit browsers*/
        color: $color;
  }
  &::-webkit-input-placeholder {
        /*WebKit browsers*/
        color: $color;
  }
  &::-moz-input-placeholder {
        /*Mozilla Firefox*/
        color: $color;
  }
  &::-ms-input-placeholder {
        /*Internet Explorer*/
        color: $color;
  }
}
@mixin ellipsisRow($row: 1) {
  @debug "$row is #{$row}";
  @if $row == 1 {
        // @debug "1行";
        @extend .text-ellipsis;
  } @else {
        // @debug "多行";
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box; // 作为弹性伸缩盒子模型显示。
        -webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式--从上到下垂直排列
        -webkit-line-clamp: #{$row}; // 显示的行
  }
}